import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, message, Anchor, Affix, Button, Pagination } from 'antd';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import styles from './TaskDeliver.less';
const { Link } = Anchor;
const dataSource = [{
  "appDescription": "有好货",
  "canRecruit": true,
  "classify": 0,
  "desc": "有好货新单品重点招稿渠道，邀请优质达人重点创作官方推荐的优质商品。该渠道阶段性开放，作为有好货优质内容试点之一。",
  "endTime": 1553961600000,
  "id": 6903,
  "logo": "https://img.alicdn.com/tfs/TB1Hkn1RVXXXXbkapXXXXXXXXXX-160-160.png",
  "name": "【有好货】人气新品池",
  "promotionType": 0,
  "recruitCount": 479,
  "saturatedStr": "暂无限制"
}, 
{
  "appDescription": "有好货",
  "canRecruit": true,
  "classify": 0,
  "desc": "有好货618商品池重点招稿渠道，邀请优质达人重点创作官方推荐的优质商品。该渠道阶段性开放，作为有好货优质内容试点之一。",
  "endTime": 1530288000000,
  "id": 6994,
  "logo": "https://img.alicdn.com/tfs/TB1Hkn1RVXXXXbkapXXXXXXXXXX-160-160.png",
  "name": "【有好货】夏季官方商品池推荐",
  "promotionType": 0,
  "recruitCount": 255,
  "saturatedStr": "暂无限制"
}, 
{
  "appDescription": "搜索淘攻略",
  "canRecruit": true,
  "classify": 0,
  "desc": "淘宝美妆精选的优质美妆内容，达人商家均可参与，前台透出在淘攻略中，无淘客佣金。",
  "endTime": 1528992000000,
  "id": 6898,
  "logo": "https://img.alicdn.com/tfs/TB1Hkn1RVXXXXbkapXXXXXXXXXX-160-160.png",
  "name": "淘宝美妆-淘攻略优质内容",
  "promotionType": 0,
  "recruitCount": 353,
  "saturatedStr": "暂无限制"
}, {
  "appDescription": "淘宝头条",
  "canRecruit": true,
  "classify": 0,
  "desc": "《淘宝博物志》是微淘+淘宝头条官方打造的一档 IP 栏目，旨在挖 掘大淘宝里的神店、神器、神现象及品牌背后的趣味故事。在此向达人和商家邀约符合相关主题的内容，优质内容将获得平台 给予的更多曝光。",
  "endTime": 1530201600000,
  "id": 1401,
  "logo": "https://img.alicdn.com/tfs/TB1Hkn1RVXXXXbkapXXXXXXXXXX-160-160.png",
  "name": "《淘宝博物志》栏目招稿",
  "promotionType": 0,
  "recruitCount": 264,
  "saturatedStr": "暂无限制"
// }, {
//   "appDescription": "必买清单",
//   "canRecruit": true,
//   "classify": 0,
//   "desc": "【淘宝心选×必买清单】日常图文招稿，仅限心选相关场景下的知识图文内容，且必须基于节点创作。内容规范请见：https://daren.bbs.taobao.com/detail.html?postId=8456176",
//   "endTime": 1554048000000,
//   "id": 6952,
//   "logo": "https://img.alicdn.com/tfs/TB1Hkn1RVXXXXbkapXXXXXXXXXX-160-160.png",
//   "name": "【淘宝心选×必买清单】日常图文招稿new",
//   "promotionType": 0,
//   "recruitCount": 0,
//   "saturatedStr": "暂无限制"
}, {
  "appDescription": "有好货",
  "canRecruit": true,
  "classify": 0,
  "desc": "【淘宝心选x有好货】日常内容招稿淘宝心选是阿里巴巴集团新推出的满足消费升级的生活类品牌。引入全球优质制造商和严苛的质量体系，为您甄选高品味高性价比的生活好物.淘宝心选，用心选，放心选。",
  "endTime": 1546331280000,
  "id": 1226,
  "logo": "https://img.alicdn.com/tfs/TB1Hkn1RVXXXXbkapXXXXXXXXXX-160-160.png",
  "name": "【淘宝心选x有好货】新单品日常内容招稿",
  "promotionType": 0,
  "recruitCount": 9,
  "saturatedStr": "暂无限制"
}];

@connect(state => ({

}))
export default class TaskDeliver extends PureComponent {
	state = {
    list: [],
		pagination: {
      total: 4,
      current: 1,
      pageSize: 10,
    },
	}
  componentWillMount() {
    const { pagination: { current, pageSize } } = this.state;
    const start = pageSize * (current - 1);
    const end = start + pageSize;
    const list = dataSource.slice(start, end);
    this.setState({ list, pagination: { ...this.state.pagination, total: dataSource.length } });
  }
	handleDeliver = (activityId) => {
		this.props.dispatch(
			routerRedux.push(`/writer/task/activity?activityId=${activityId}`)
		);
	}
	handlePageChange = (current, pageSize) => {
    const start = pageSize * (current - 1);
    const end = start + pageSize;
    const list = dataSource.slice(start, end);
    this.setState({ list, pagination: { ...this.state.pagination, total: dataSource.length, current, pageSize } });
  }
	render() {
		const ACTIVITIES = this.state.list;
		return (
			<div>
				{
					ACTIVITIES.map((item, index) =>
						<div key={index} className={styles.creator_block}>
							<div className={styles.ism_activity_list}>
								<div className={styles.iac_activity_card}>
									<div className={styles.iac_actitity__title}>
										{item.name}
										<div className={styles.iac_actitity__title__extra}>
											<div className={styles.ice_activity__date}>
												<span>
													截止日期：
										      <span className={styles.ice_activity__date__time}>
														{moment(item.endTime).format('YYYY-MM-DD HH:mm:ss')}
													</span>
												</span>
											</div>
										</div>
									</div>
									<div className={styles.iac_activity__desc}>
										{item.desc}
									</div>
									<div className={styles.iac_activity__footer}>
										<div style={{ color: 'rgb(153, 153, 153)', fontSize: '12px' }}>
											<span>
												{item.appDescription}
											</span>
											<span>
									</span>
											<span>
												<span style={{ margin: '0 5px' }}>|</span>
												{item.saturatedStr}
											</span>
										</div>
										<Button type="primary" className={styles['block-common-btn']} onClick={() => this.handleDeliver(item.id)}>立即投稿</Button>
									</div>
								</div>
							</div>
						</div>
					)
				}
				<Pagination
          {...this.state.pagination}
          style={{ float: 'right' }}
          onChange={this.handlePageChange}
          onShowSizeChange={this.handlePageChange}
          showSizeChanger
        />
			</div>
		);
	}
}
